<template>
  <div class="tip">
    <div class="tip-top"
         style="display:none">
      <button class="top-button">免费下载</button>
      <img class="tip-top-img"
           src="../img/logo.png" />
      <div class="title-box">
        <span class="title-text">天天老友APP</span>
        <span class="title-text">“友”你不孤单</span>
      </div>
    </div>
    <div class="tip-bottom">
      <button style="none"
              class="top-button">免费下载</button>
      <a class="top-button"
         :href="aurl"
         download="laoyou">免费下载</a>
      <img class="tip-bottom-img"
           src="../img/logo.png" />
      <div class="title-box">
        <span class="title-bot-text">天天老友APP</span>
        <span class="title-bot-text">“友”你不孤单</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      aurl: "http://dt.ttlaoyou.com/apk/app.apk"
    }
  },
  mounted () {
    var time = new Date().getTime()
    this.aurl = "http://dt.ttlaoyou.com/apk/app.apk?time=" + time
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.title-box {
  display: flex;
  flex-direction: column;
}
.title-text {
  font-size: 0.3rem;
  color: #fff;
}
.title-bot-text {
  font-size: 0.3rem;
  color: #000;
}
.tip-top {
  display: flex;
  align-items: center;
  position: fixed;
  top: 0;
  width: 100%;
  height: 1.24rem;
  background: #d99290;
  &-img {
    margin-left: 0.56rem;
    width: 0.96rem;
    height: 0.96rem;
    margin-right: 0.22rem;
  }
}
.top-button {
  width: 2.8rem;
  height: 1rem;
  background: #dc0e0e;
  color: #fff;
  font-size: 0.32rem;
  text-align: center;
  line-height: 1rem;
  position: absolute;
  right: 0.2rem;
  top: 50%;
  margin-top: -0.5rem;
  border-radius: 0.2rem;
  font-size: 0.45rem;
}
.tip-bottom {
  display: flex;
  align-items: center;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 1.24rem;
  background: #fff;
  &-img {
    margin-left: 0.56rem;
    width: 0.96rem;
    height: 0.96rem;
    margin-right: 0.22rem;
  }
}
</style>
